<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高品质生活平台</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .menu-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.2s ease;
            }
            .hover-scale:hover {
                transform: scale(1.05);
            }
        }
    </style>

    <style>
        /* 基础动画设置 */
        .nav-item {
            position: relative;
            transition: all 0.3s ease;
        }

        .nav-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #165DFF;
            transition: width 0.3s ease;
        }

        .nav-item:hover::after {
            width: 100%;
        }

        /* 滚动时导航栏样式变化 */
        .navbar-scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>

<body class="font-inter bg-neutral-100 text-neutral-700">
<!-- 导航栏 -->
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white">
    <div class="container mx-auto px-4 md:px-6">
        <div class="flex items-center justify-between h-16 md:h-20">
            <!-- Logo -->
            <div class="flex items-center">
                <a href="#" class="flex items-center space-x-2">
                    <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                        <i class="fa fa-diamond text-white text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-neutral-700">臻选生活</span>
                </a>
            </div>

            <!-- 桌面端菜单 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#" class="nav-item font-medium text-neutral-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="nav-item font-medium text-neutral-600 hover:text-primary transition-colors">甄选家</a>
                <a href="#" class="nav-item font-medium text-neutral-600 hover:text-primary transition-colors">企业采购</a>
                <a href="#" class="nav-item font-medium text-neutral-600 hover:text-primary transition-colors">客户服务</a>
            </nav>

            <!-- 用户功能区 -->
            <div class="flex items-center space-x-4">
                <a href="#" class="hidden md:block nav-item font-medium text-neutral-600 hover:text-primary transition-colors">我的订单</a>
                <a href="#" class="px-4 py-2 rounded-full bg-primary text-white font-medium hover:bg-primary/90 transition-colors hover-scale">登录/注册</a>

                <!-- 移动端菜单按钮 -->
                <button id="mobile-menu-button" class="md:hidden text-neutral-700 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-neutral-200 menu-shadow">
        <div class="container mx-auto px-4 py-3 space-y-3">
            <a href="#" class="block py-2 font-medium text-neutral-600 hover:text-primary transition-colors">首页</a>
            <a href="#" class="block py-2 font-medium text-neutral-600 hover:text-primary transition-colors">我的订单</a>
            <a href="#" class="block py-2 font-medium text-neutral-600 hover:text-primary transition-colors">甄选家</a>
            <a href="#" class="block py-2 font-medium text-neutral-600 hover:text-primary transition-colors">企业采购</a>
            <a href="#" class="block py-2 font-medium text-neutral-600 hover:text-primary transition-colors">客户服务</a>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="pt-16 md:pt-20">
    <!-- 英雄区 -->
    <section class="bg-gradient-to-r from-primary/5 to-primary/10 py-16 md:py-24">
        <div class="container mx-auto px-4 md:px-6">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-neutral-700 leading-tight mb-6">
                    发现生活中的<span class="text-primary">美好甄选</span>
                </h1>
                <p class="text-lg md:text-xl text-neutral-500 mb-8">
                    为您精选全球高品质商品与服务，打造专属优质生活体验
                </p>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="#" class="px-8 py-3 bg-primary text-white rounded-full font-medium hover:bg-primary/90 transition-all hover-scale w-full sm:w-auto">
                        立即探索
                    </a>
                    <a href="#" class="px-8 py-3 bg-white text-primary border border-primary rounded-full font-medium hover:bg-primary/5 transition-all hover-scale w-full sm:w-auto">
                        了解更多
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 特色区域 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-neutral-700 mb-4">为什么选择我们</h2>
                <p class="text-neutral-500 max-w-2xl mx-auto">我们致力于为您提供最优质的产品和服务体验</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 特色卡片1 -->
                <div class="bg-neutral-100 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-certificate text-primary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">品质保证</h3>
                    <p class="text-neutral-500">所有商品经过严格筛选，确保品质达到高标准，让您购物无忧。</p>
                </div>

                <!-- 特色卡片2 -->
                <div class="bg-neutral-100 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-truck text-secondary text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">快速配送</h3>
                    <p class="text-neutral-500">高效物流系统，确保您的订单及时送达，享受便捷购物体验。</p>
                </div>

                <!-- 特色卡片3 -->
                <div class="bg-neutral-100 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow hover-scale">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-headphones text-green-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">优质服务</h3>
                    <p class="text-neutral-500">专业客服团队随时为您提供帮助，解决您的任何问题。</p>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="bg-neutral-700 text-white py-12">
    <div class="container mx-auto px-4 md:px-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                        <i class="fa fa-diamond text-primary text-xl"></i>
                    </div>
                    <span class="text-xl font-bold">臻选生活</span>
                </div>
                <p class="text-neutral-300 mb-4">为您精选全球高品质商品与服务</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                        <i class="fa fa-wechat text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-300 hover:text-white transition-colors">
                        <i class="fa fa-instagram text-xl"></i>
                    </a>
                </div>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">首页</a></li>
                    <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">甄选家</a></li>
                    <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">企业采购</a></li>
                    <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">客户服务</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">客户服务</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">帮助中心</a></li>
                    <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">联系我们</a></li>
                    <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">退换货政策</a></li>
                    <li><a href="#" class="text-neutral-300 hover:text-white transition-colors">隐私政策</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                <ul class="space-y-2">
                    <li class="flex items-center space-x-2">
                        <i class="fa fa-phone text-neutral-300"></i>
                        <span class="text-neutral-300">400-123-4567</span>
                    </li>
                    <li class="flex items-center space-x-2">
                        <i class="fa fa-envelope text-neutral-300"></i>
                        <span class="text-neutral-300">service@zhenxuan.com</span>
                    </li>
                    <li class="flex items-center space-x-2">
                        <i class="fa fa-map-marker text-neutral-300"></i>
                        <span class="text-neutral-300">北京市朝阳区某某大厦</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="border-t border-neutral-600 mt-8 pt-8 text-center text-neutral-400">
            <p>© 2023 臻选生活 版权所有</p>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 移动端菜单切换
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    mobileMenuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });

    // 滚动时导航栏样式变化
    const navbar = document.getElementById('navbar');

    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('navbar-scrolled');
        } else {
            navbar.classList.remove('navbar-scrolled');
        }
    });

    // 初始化检查滚动位置
    if (window.scrollY > 50) {
        navbar.classList.add('navbar-scrolled');
    }
</script>
</body>
</html>